<template>
    <div class="image-container">
      <img
        src="@/assets/pic/Home_1.png"
        alt="Home 1"
        class="home-image"
      />
      <img
        src="@/assets/pic/Home_2.jpg"
        alt="Home 2"
        class="home-image"
      />
    </div>
  </template>
  
  <script>
  export default {
    name: 'HomePage',
  };
  </script>
  
  <style scoped>
  .image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50%; /* Adjust the height as needed */
    overflow: hidden; /* Ensures the images don't overflow the container */
    pointer-events: none; /* Allows hover effects on images */
  }
  
  .home-image {
    width: 50%; /* Each image takes up half the width */
    height: 100%;
    object-fit: cover; /* Keeps the aspect ratio while covering the container */
    border-right: 2px dashed black; /* Adds a black dashed line between images */
    transition: transform 0.3s ease; /* Smooth transition for the放大 effect */
    pointer-events: auto; /* Allows hover effects on images */
  }
  
  .home-image:last-child {
    border-right: none; /* Removes the border for the last image */
  }
  
  .home-image:hover {
    transform: scale(1.1); /*放大图片内容，保持容器大小不变 */
  }
  </style>